<template>
    <div>
        <div class="likePlayList">
            <remdTl>收藏歌单</remdTl>
            <ul  v-if="likePlayList.length>0">
                <li  v-for="item in likePlayList" :key="item.id" >
                    <router-link tag="div" :to="`/playlist/${item.id}`"><span>{{item.name}}</span>---<span>{{item.nickname}}</span></router-link>
                    <span class="delete iconfont iconclose" @click="deletePlayList(item)"></span>
                </li>
            </ul>
            <ul v-else>
                <li class="noData"><span>暂时没有收藏歌单</span></li>
            </ul>
        </div>
        <div class="likeSongList">
            <remdTl>收藏歌曲</remdTl>
            <ul  v-if="likeSongList.length>0">
                <li v-for="item in likeSongList" :key="item.id">
                    <SongItem :item="item"></SongItem>
                </li>
                <Loading v-if="isLoading"></Loading>
            </ul>
            <ul v-else>
                <li class="noData"><span>暂时没有收藏歌曲</span></li>
            </ul>
        </div>
        <div class="likeMvList">
            <remdTl>收藏MV</remdTl>
            <ul  v-if="likeMvList.length>0">
                <li v-for="item in likeMvList" :key="item.id">
                    <MvItem :item="item"></MvItem>
                </li>
                <Loading v-if="isLoading"></Loading>
            </ul>
            <ul v-else>
                <li class="noData"><span>暂时没有收藏MV</span></li>
            </ul>
        </div>
    </div>
</template>
<script>
import SongItem from '@/components/SongItem'
import Loading from '@/components/Loading'
import remdTl from '../components/remdTl'
import MvItem from '../components/MvItem.vue'
export default {
    components:{
        remdTl,
        SongItem,
        Loading,
        MvItem
    },
    data() {
        return {
            likePlayList : [], //歌单
            likeSongList : [], //歌曲
            likeMvList : [],   //MV
            isLoading: true,   //加载中
        }
    },
    created(){
        let playArr = JSON.parse( window.localStorage.getItem('likePlayList'));//本地获取
        let songArr = JSON.parse( window.localStorage.getItem('likeSongList'));
        let mvArr = JSON.parse( window.localStorage.getItem('likeMvList'));
        //收藏歌单详情
        if(playArr){
            playArr.forEach( item => {
                this.$http.get('/playlist/detail?id=' + item).then(data=>{
                    this.isLoading = false;
                    this.likePlayList.push(
                        {
                            "id" : item,
                            "name": data.data.playlist.name,
                            "nickname" : data.data.playlist.creator.nickname
                        }
                    );
                }).catch(err=>{
                    console.log(err);
                });
            });
        }
        //收藏歌曲详情
        if(songArr){
            this.loadMusic(songArr);
        }
        //收藏Mv详情
        if(mvArr){
            mvArr.forEach( item => {
                this.$http.get('/mv/detail?mvid=' + item).then(mvData=>{
                    this.isLoading = false;
                    mvData.data.data.picUrl = mvData.data.data.cover;
                    this.likeMvList.push(mvData.data.data);
                }).catch(err=>{
                    console.log(err);
                });
            });
            // console.log(this.likeMvList);
        }
    },
    methods: {
       loadMusic(songArr){
            //获取歌单详情
            let ids = songArr.join(',');
            //获取歌曲详情
            if(ids.length>0){
                this.$http.get('http://music.kele8.cn/song/detail?ids='+ids).then( songData=>{
                    this.isLoading = false;
                    songData.data.songs.map(d=>{
                        //处理数据和 SongItem不一致 转换数据
                        d.song={
                            artists:d.ar
                        }
                        this.likeSongList.push(d);
                        return d;
                    })
                }).catch(err=>{
                    console.log(err);
                });
            }
        },
        // 删除收藏歌单
        deletePlayList(item){
            let playArr = JSON.parse( window.localStorage.getItem('likePlayList'));
            let index = playArr.indexOf(item);
            playArr.splice(index,1);
            window.localStorage.setItem('likePlayList',JSON.stringify(playArr));
            window.location.reload();
        }
    }
}
</script>

<style lang="less" scoped>
.likePlayList{
    ul{
        display: block;
        padding: 0px 10px;
        li{
            padding-bottom: 8px;
            border-bottom: 1px solid #e2e2e2;
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            div{
                display: flex;
                span{
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    &:nth-child(1){
                        width: 50%;
                        color: #dd001b;
                    }
                    &:nth-child(2){
                        width: 30%;
                        color: #aaa;
                    }
                }
            }
            .delete{
                float: right;
                text-align: center;
                padding-top: 4px;
                width: 8%;
                cursor: pointer;
                color: #dd001b;
            }
        }
    }
}
.likeSongList{
    ul{
        padding: 0px 10px;
    }
}
.noData{
    display: flex;
    justify-content: center;
    text-align: center;
    border-bottom: 1px solid #e2e2e2;
    padding-bottom: 8px;
    color: #dd001b;
    span{
        margin: 0 auto;
    }
}
</style>